<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table  ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user" label="会员账号">
            <a-input allow-clear v-model="searchForm.user" placeholder="会员账号" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="uid" label="会员UID">
            <a-input allow-clear v-model="searchForm.uid" placeholder="会员UID" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="from_type" label="来源">
            <sa-select v-model="searchForm.from_type" :data="paramsData.from_type" :fieldNames="{value:'value',label:'title'}" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="状态">
            <sa-select v-model="searchForm.state" :data="paramsData.state" :fieldNames="{value:'value',label:'title'}" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item field="date" label="日期">
            <a-range-picker v-model="searchForm.date" format="YYYY-MM-DD" :allow-clear="true"
            @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>

      </template>

      <template #user="{ record }">
        <div>
            <div>UID: {{ record.user_id }}</div>
            <div>会员账号: {{ record?.user?.user_name }}</div>
            <a-tooltip :content="record?.auth?.name">
              <div>公司名称: {{ record?.auth?.name }}</div>       
            </a-tooltip>
            <div>法人姓名: {{ record?.auth?.company?.fuzeren }}</div>
            <div>手机号: {{ record.mobile }}</div>
            <a-tooltip :content="record?.auth?.number">
              <div>统一税务编号: {{ record?.auth?.number }}</div>      
            </a-tooltip>   
        </div>
      </template>
      <template #asset="{ record }">
        <div>
          <div>提现资产: {{ record.points_text }}</div>
          <div>收款渠道: {{ record?.card_type_text }}</div>
          <a-tooltip :content="record?.card?.bank_name">
              <div>银行名称: {{ record?.card?.bank_name }}</div>      
          </a-tooltip> 
          <a-tooltip :content="record?.card?.sub_bank_name">
              <div>支行名称: {{ record?.card?.sub_bank_name }}</div>      
          </a-tooltip>
          <div>银行卡号: {{ record?.card?.number }}</div> 
          <div>提现金额: {{ record?.get_num}}{{ ( record.get_num_real )+'RMB'  }}</div> 
        </div>
      </template>
      <template #ticket="{ record }">
        <div>
          <a-tooltip :content="record?.invoice_name">
              <div>发票抬头: {{ record?.invoice_name}}</div>      
          </a-tooltip>
          <div>发票类型: {{ record?.type_text }}</div>
          <div>发票金额: {{ record?.get_num_real }}</div>   
          <a-tooltip :content="record?.invoice_code">
              <div>发票编号: {{ record?.invoice_code}}</div>      
          </a-tooltip>
          <div>发票状态: {{ record?.state_str}}</div> 
          <div>来源: {{ record?.from_type_text}}</div> 
        </div>
      </template>
      <template #status="{ record }">
        <div>
            <div>状态: {{ record.state_str }}</div>
            <div v-if="record.type==0" class="over_text"> 发票未上传需完善</div>
           
        </div>
      </template>
      <template #image="{ record }">
        <div>
          <a-image v-if="record.image" :src="record.image" :width="100" :height="100"></a-image>
          <div v-else>
            <a-tooltip :content="record?.express_name">
              <div>物流公司: {{ record?.express_name}}</div>      
            </a-tooltip>
            <a-tooltip :content="record?.express_code">
                <div>物流单号: {{ record?.express_code}}</div>      
            </a-tooltip>
          </div>
          </div>
      </template>

      <template #time="{ record }">
        <div>申请时间: {{ record.create_time }}</div>
        <div>处理时间: {{ record.apply_time }}</div>
      </template>
      <template #view="{ record }">
        <div v-if="record.image">
          <a :href="record.image" target="_blank" style="color:#5c7cfa;cursor: pointer;">  签约文件</a>
        </div>
        <div v-else>
          未上传
        </div>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-button  type="primary" size="mini" shape="round" @click="handleDetail('detail', record)">审核记录</a-button>
        <a-button  type="primary" size="mini" shape="round" class="yellow_color"
          v-if="record.state == 0" @click="handleDetail('check', record)">审核
        </a-button>
       

      </template>
    </sa-table>
    <!-- 编辑表单 -->
    <detail-form ref="detailRef" @success="refresh" />
    <table-list ref="tableRef"></table-list>
    <a-modal v-model:visible="revisible" title="请输入谷歌验证码" @before-ok="recheck" @cancel="visible=false">
      <a-form-item label="谷歌验证码" required>
        <a-input v-model="checkInfo.google_code" placeholder="请输入" />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaTable from '@cps/sa-table/index.vue'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import { useRouter } from 'vue-router';
import detailForm from './detail.vue'
import tool from '@/utils/tool'
import tableList from './table.vue'
const crudRef = ref()
const tableRef = ref()
const detailRef = ref()
const visible = ref(false)
const revisible = ref(false)
const searchForm = ref({
  user: '',
  uid: '',
  date:[],
  state: 99,
  number: '',
  from_type:'',
})
const checkInfo = ref({
  google_code: '',
  id:'',
})
const options = reactive({
  api: memberApi.member_ticket_list,//表格数据接口
  operationColumnWidth: 180,//操作欄
  columnAlign: 'left',
  pageSimple: false,
  isExpand: false,//展開所有子樹
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: '会员信息', dataIndex: 'user', width: 240 },
  { title: '提现资产', dataIndex: 'asset', width: 220, align: 'left' },
  { title: '发票信息', dataIndex: 'ticket', width: 200 },
  { title: '状态', dataIndex: 'status', width: 120 },
  { title: '图片', dataIndex: 'image', width: 150, align: 'center' },
  { title: '时间', dataIndex: 'time', width: 180 },
])
const handleDetail = (type, data) => {
  if (type == 'detail') {
    tableRef.value?.open(data)
  } else if (type == 'check') {
    detailRef.value?.open('check', data)
  } else { 
    checkInfo.value.id=data.id
    revisible.value = true
  }
  
}
const initPage = async () => { }
const resetSearch = () => {
  searchForm.value.date = []
}
const recheck = async(done) => { 
  if (!checkInfo.value.google_code) {
    Message.error('请输入谷歌验证码')
    done(false)
    return false
  } else { 
    const { data } = await memberApi.member_bank_List_recheck(checkInfo.value)
    Message.success('操作成功')
    revisible.value = false
    done(true)
    refresh()
  }
    
}
const refresh = async () => {
  crudRef.value?.refresh()
}
const paramsData = ref({})
// 获取角色组
const getParams = async () => {
  const { data } = await memberApi.member_ticket_list_config()
  paramsData.value = { ...data }
  paramsData.value.state = tool.simpleTransformArray(data.state)
  paramsData.value.from_type = tool.simpleTransformArray(data.from_type)
  paramsData.value.state.unshift({ title: '全部', value: 99 })
  console.log('111', paramsData.value);
}



onMounted(async () => {
  getParams()
  initPage()
  refresh()
})
</script>
<style scoped>
div {
  font-size: 12px;
  /* text-align: left; */
}
.icon {
  width: 1em;
}
</style>
